<template lang="html">
  <div class="giftBox" >
    <div >
      <ul class="header">
        <li @click="onActive(1)" :class="active==1?'topActive':''">送礼活动</li>
        <li @click="onActive(2)" :class="active==2?'topActive':''">礼物配置</li>
        <li @click="onActive(3)" :class="active==3?'topActive':''">赠送记录</li>
      </ul>
      <el-row>
        <router-view> </router-view>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return {
      active:1,
    }
  },
  methods:{
    onActive:function (n){
      this.active=n;
      switch (n) {
        case 1:
          this.$router.push({path:'/activity/gift/give'});
          break;
        case 2:
          this.$router.push({path:'/activity/gift/config'});
          break;
        case 3:
          this.$router.push({path:'/activity/gift/history'});
          break;
        default:

      }
    },
    addGroup:function (){
      this.dialogVisible=true;
    },
    update:function (){
      this.dialogVisible2=true;
    },
    // giveTo:function (val){
    //   this.$store.dispatch('activityCloseType',{parentName:'gift',typeName:'showType2'});
    //   this.$store.dispatch('activityChangeTitle',{parentName:'gift',titleName:'title',title:'/ '+val});
    //   this.$router.push({path:'/activity/gift/give'});
    // },
    // configTo:function (val){
    //   this.$store.dispatch('activityCloseType',{parentName:'gift',typeName:'showType2'});
    //   this.$store.dispatch('activityChangeTitle',{parentName:'gift',titleName:'title',title:'/ '+val});
    //   this.$router.push({path:'/activity/gift/config'});
    // },
    // historyTo:function (val){
    //   this.$store.dispatch('activityCloseType',{parentName:'gift',typeName:'showType2'});
    //   this.$store.dispatch('activityChangeTitle',{parentName:'gift',titleName:'title',title:'/ '+val});
    //   this.$router.push({path:'/activity/gift/history'});
    // }
  },
  created(){
    this.$store.dispatch('activityCloseType',{parentName:'gift',typeName:'showType1'});
    this.$store.dispatch('activityChangeTitle',{parentName:'gift',titleName:'parentTitle',title:'/拼团送礼'});
    console.log(this.$route.path);
    switch (this.$route.path) {
      case '/activity/gift/history':
          this.active=3;
        break;
      case '/activity/gift/config':
          this.active=2;
        break;
      case '/activity/gift/give':
          this.active=1;
        break;
      default:

    }
  }
}
</script>

<style lang="Sass" scoped>
  .giftBox{ line-height: 30px;
    .header{ width: 98%; list-style: none; margin: 10px auto 0 auto; overflow: hidden;
      li{float: left; margin-right: 10px; padding: 3px 6px 0 6px; background: #E7E9F0;
        border-radius: 8px 8px 0 0; color: #666666;}
      .topActive{background: #fff;}
    }
    .topBox{width: 98%; margin: 0px auto 10px auto; padding: 10px 5px; background: #fff; border-radius: 8px;
       box-sizing: border-box;
     }
    .btmBox{width: 98%; margin: 10px auto; padding: 10px 5px; background: #fff; border-radius: 8px;
       box-sizing: border-box;
       .listBox{list-style: none;
         li{display: flex; width: 100%; padding: 5px; box-sizing: border-box;
           span{text-align: left;}
           .productName{flex: 1;}
           .createTime{flex: 0 0 300px;}
           .option{flex: 0 0 120px; cursor: pointer;}
         }
         li:nth-of-type(odd){ background: #FAFAFC; }
         li:first-child{ background: #fff;}
       }
     }
  }
</style>
